/**
 * 封装一个组件 Button
 * 使用示例:
 * <Button type="primary">我是一个按钮哦</Button>
 * 
 * 组件标签的属性
 * * type           primary 蓝色   danger 红色 
 * * isloading      true 显示 loading 效果   false 不显示
 */
import React, { Component } from 'react'
import './2-Button.css';

export default class Button extends Component {
  render() {
    //获取外部传入的 isloading 属性
    let {isloading} = this.props;
    //返回虚拟 DOM 对象
    return (
      // 使用组件标签中的文本(children)设置按钮的文本
      <button className={`btn btn-${this.props.type}`}>
        {isloading && <img width="20" src="https://img.zcool.cn/community/0196fa582abab6a84a0d304f899eaf.gif" alt="" />}
        {this.props.children}
      </button>
    )
  }
}
